<template>
  <view class="event-item" v-for="item in eventList" :key="item.title">
    <view class="flex-1">
      <view class="flex align-center">
        <text class="tag" :class="item.type === 1 ? 'tag-job' : 'tag-report'">{{ item.title }}</text>
        <text class="content">{{ item.content }}</text>
      </view>
      <u-text :text="item.time" size="24rpx" color="#999999" margin="10rpx 0 0 0"></u-text>
    </view>
    <view>
      <view class="btn-handle" v-if="type === 1">处理</view>
      <view v-if="type === 2">
        <view class="btn-handle" v-if="!item.isHandle">催促</view>
        <view class="btn-handle" :class="{ 'btn-handle-disabled': item.isHandle }" v-if="item.isHandle">已催促</view>
      </view>
    </view>
  </view>
</template>
<script setup>
const props = defineProps({
  eventList: {
    type: Object,
    default: () => { }
  },
  type: {
    type: Number,
    default: 1 //1:待办，2:督办
  }
})
</script>
<style scoped lang="scss">
.event-item {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #eee;
  gap: 30rpx;
  padding: 30rpx 0;

  .tag {
    background: #EBF3FF;
    color: #0060E6;
    font-size: 24rpx;
    padding: 2rpx 10rpx;
    border-radius: 10rpx;
    height: 32rpx;
    white-space: nowrap;

    &.tag-job {
      background: #EBF3FF;
      color: #0060E6;
    }

    &.tag-report {
      background: #FFF1D9;
      color: #FFA40C;
    }
  }

  .content {
    flex: 1;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28rpx;
    color: #050F1A;
    font-weight: bold;
    margin-left: 20rpx;
  }

}

.btn-handle {
  background: #EBF3FF;
  color: #0060E6;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  white-space: nowrap;

  &.btn-handle-disabled {
    background: #EEEEEE !important;
    color: #999999 !important
  }
}
</style>